<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书借阅平台</title>
<link rel="stylesheet" href="webjars/layui/2.3.0/css/layui.css">
<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
<script type="text/javascript" src="webjars/layui/2.3.0/layui.js"></script>
<script type="text/javascript">
	layui.use('element', function() {
		var element = layui.element;
	});	
	
	layui.use('layer', function(){
	  	var layer = layui.layer;
	});
	
	function borrow(){
		layer.confirm("请登录后在借书", { 
			btn:['登录', '确定']
		},function(){
			window.location.href="login1";
		});
	}
</script>
<style type="text/css">
	.home{
		width: 80%;
		margin: 30px auto;	
	}
	.book{
		width: 14%;
		height: 300px;
		border: 1px solid white;
		float: left;
		margin-left: 5%;
		margin-bottom: 30px;
	}
	.top{
		height: 240px;
		margin-bottom: 10px;
	}
	.book p{
		font-family: '楷体';
		font-size: 16px;
		margin-left: 5px;
	}
	.btn{
		height: 240px;
		width: 100%;
		opacity: 0;
		font-family: '楷体';
		text-align:center;
		margin-top: -290px;
	}
	.btn:hover {
		background: #99FFCC;
		opacity: 0.8;
		cursor:pointer ;
		transition: opacity 0.5s;
	}
	.book:hover{
		border: 1px solid #9900CC;
		background: #F8F8F8;
  		box-shadow: 0 18px 36px #c8ecf8;
   	  	-webkit-transition: all .4s ease;
	 	-moz-transition: all .4s ease;
	  	-ms-transition: all .4s ease;
	  	-o-transition: all .4s ease;
	  	transition: all .4s ease;
		
	}
</style>
</head>
<body>
	<ul class="layui-nav layui-bg-blue" style="padding-right: 50px;">
		<li class="layui-nav-item" style="text-align: left;">
			<a style="font-size: 26px; font-family: '楷体';"><i class="layui-icon" style="font-size: 26px;">&#xe656;</i>  图书借阅平台</a>
		</li>
	  	<li class="layui-nav-item" style="float: right;">
	    	<a href="login1"><i class="layui-icon">&#xe612;</i> 登录</a>
	  	</li>
	  	<li class="layui-nav-item" style="float: right;">
	   	 	<a href=""><i class="layui-icon">&#xe613;</i> 关于我们</a>
	  	</li>
	  	<li class="layui-nav-item layui-this" style="float: right;">
	    	<a href=""><i class="layui-icon">&#xe68e;</i> 首页</a>
	  	</li>
	</ul>
	
	<div class = "home">
		<div class="book" onclick="borrow()" th:each="c:${book}">
			<div class="top">
				<img th:src="@{/download(id=${c.id})}" width="100%" height="98%" />
			</div>
			<p><span>书名：</span><font th:text="${c.name}"></font></p>
	
			<p><span>出版社：</span><font th:text="${c.press}"></font></p>
			<div class="btn">
				<span style="font-size: 23px; line-height: 240px;">点击借书</span>
			</div>
		</div>
	</div>
</body>
</html>